<%@ include file="../common/top.jsp"%>
<div id="Welcome">
  <div id="WelcomeContent">
      <!-- 显示用户登录的firstName -->
  </div>
</div>

<div id="Main">
  <div id="Sidebar">
    <div id="SidebarContent">
      <a href="categoryForm?categoryId=FISH"><img src="images/fish_icon.gif" /></a> <br />
      Saltwater, Freshwater <br />
      <a href="categoryForm?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a> <br />
      Various Breeds <br />
      <a href="categoryForm?categoryId=CATS"><img src="images/cats_icon.gif" /></a> <br />
      Various Breeds, Exotic Varieties <br />
      <a href="categoryForm?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a> <br />
      Lizards, Turtles, Snakes <br />
      <a href="categoryForm?categoryId=BIRDS"><img src="images/birds_icon.gif" /></a> <br />
      Exotic Varieties</div>
  </div>

  <div id="MainImage">
    <div id="MainImageContent">
      <map name="estoremap">
        <div id="inform" style="display: none; position: absolute; z-index: 100; background: #fff; border: 1px solid #ccc; padding-left: 10px;text-align: left; width: 280px;"></div>

<%--data-category='BIRDS'：data-*是HTML5的标准，用来给元素添加自定义属性
                   这句话就是给绑定了一个名字叫category的数据，值为BIRDS
                   JavaScript可以通过element.dataset.category获取这个值--%>

        <%--
          onmouseover: 鼠标移入元素时触发
          onmouseout:  鼠标移出元素时触发
        --%>

          <area alt="Birds" coords="72,2,280,250" href="categoryForm?categoryId=BIRDS" shape="RECT" data-category="BIRDS" />
          <area alt="Fish" coords="2,180,72,250" href="categoryForm?categoryId=FISH" shape="RECT" data-category="FISH" />
          <area alt="Dogs" coords="60,250,130,320" href="categoryForm?categoryId=DOGS" shape="RECT" data-category="DOGS" />
          <area alt="Reptiles" coords="140,270,210,340" href="categoryForm?categoryId=REPTILES" shape="RECT" data-category="REPTILES" />
          <area alt="Cats" coords="225,240,295,310" href="categoryForm?categoryId=CATS" shape="RECT" data-category="CATS" />
          <area alt="Birds" coords="280,180,350,250" href="categoryForm?categoryId=FISH" shape="RECT" data-category="BIRDS" />

      </map>
      <img height="355" src="images/splash.gif" align="middle"
           usemap="#estoremap" width="350" /></div>
  </div>

  <div id="Separator">&nbsp;</div>
</div>
<%@ include file="../common/bottom.jsp"%>